<template>
  <view class="uv-page">
    <view>
      <uv-cell-group>
        <uv-cell
          @click="showCalendar(index)"
          :title="item.title"
          v-for="(item, index) in list"
          :key="index"
          :label="values[index]"
          isLink
        >
          <template v-slot:icon>
            <image
              class="uv-cell-icon"
              :src="item.iconUrl"
              mode="widthFix"
            ></image>
          </template>
        </uv-cell>
      </uv-cell-group>
      <view style="margin: 30rpx -15px">
        <uv-calendars
          v-if="show"
          :insert="true"
          :lunar="true"
          start-date="2021-01-01"
          end-date="2030-01-01"
          @change="confirm"
        />
      </view>
      <uv-calendars ref="calendar2" @confirm="confirm" />
      <uv-calendars ref="calendar3" mode="multiple" @confirm="confirm" />
      <uv-calendars ref="calendar4" mode="range" @confirm="confirm" />
      <uv-calendars
        ref="calendar5"
        mode="range"
        :date="date5"
        color="#f56c6c"
        confirm-color="#f56c6c"
        @confirm="confirm"
      />
      <uv-calendars
        ref="calendar6"
        mode="range"
        title="选择日期"
        start-text="住店"
        end-text="离店"
        :selected="selected"
        @confirm="confirm"
      />
      <uv-calendars
        ref="calendar7"
        :startDate="startDate"
        :endDate="endDate"
        @confirm="confirm"
      />
      <uv-calendars ref="calendar8" lunar @confirm="confirm" />
      <uv-calendars ref="calendar9" :date="defaultDate" @confirm="confirm" />
      <uv-calendars
        ref="calendar10"
        mode="multiple"
        :date="date10"
        @confirm="confirm"
      />
      <uv-calendars
        ref="calendar11"
        mode="range"
        :date="date11"
        @confirm="confirm"
      />
    </view>
  </view>
</template>
<script>
export default {
  data() {
    const d = new Date();
    const year = d.getFullYear();
    let month = d.getMonth() + 1;
    month = month < 10 ? `0${month}` : month;
    const date = d.getDate();
    return {
      show: false,
      index: 0,
      values: ["", "", "", "", "", "", "", ""],
      startDate: `${year}-${month}-02`,
      endDate: `${year}-${month}-20`,
      selected: [
        {
          date: `${year}-${month}-02`,
          info: "签到",
          badge: true,
          infoColor: "#ff0000",
        },
        {
          date: `${year}-${month}-06`,
          info: "余10",
          infoColor: "#19be6b",
          topinfo: "￥100",
          topinfoColor: "#19be6b",
        },
      ],
      defaultDate: `${year}-${month}-15`,
      date5: [`${year}-${month}-08`, `${year}-${month}-20`],
      date10: [
        `${year}-${month}-08`,
        `${year}-${month}-16`,
        `${year}-${month}-24`,
      ],
      date11: [`${year}-${month}-08`, `${year}-${month}-20`],
      list: [
        {
          title: "自定义文案",
          iconUrl: "https://cdn.uviewui.com/uview/demo/calendar/14.png",
        },
      ],
    };
  },
  methods: {
    showCalendar(index) {
      this.index = index + 1;
      if (this.index == 1) {
        return (this.show = !this.show);
      }
      this.$refs[`calendar${this.index}`].open();
    },
    confirm(e) {
      let time = null;
      if (e.range.before && e.range.after) {
        time = `${e.range.before} 至 ${e.range.after}`;
      } else if (e.multiple.data.length) {
        time =
          e.multiple.data.length > 1
            ? `${e.multiple.data[0]}等多个日期`
            : e.multiple.data[0];
      } else {
        time = e.fulldate;
      }
      uni.showToast({
        icon: "none",
        title: time,
      });
    },
  },
};
</script>
